<template>
    <div>
        <m-table :columns="columns" :data="adminList" :loading="loading" :title="$route.meta.title">
            <template #extra>
                <a-button v-perms="['/adminapi/system.auth.admin_user/save']" type="primary" shape="round" @click="handleEdit('add')">
                    <template #icon>
                        <icon-plus />
                    </template>
                </a-button>
            </template>

            <template #avatar="{ record }">
                <a-avatar :size="32" :src="record.avatar" />
            </template>

            <template #role="{ record }">
                123123
            </template>
            <template #status="{ record }">
                <a-tag :color="record.status ? 'green' : 'red'">{{ record.status ? '启用' : '禁用' }}</a-tag>
            </template>
            <template #action="{ record }">
                <a-space>
                    <a-button v-perms="['/adminapi/system.auth.admin_user/update']" type="primary" shape="round" @click="handleEdit('edit', record)">
                        <template #icon>
                            <icon-edit />
                        </template>
                    </a-button>

                    <a-popconfirm :content="`确定删除 [${record.nickname}] 吗？`" @ok="handleDelete(record.id)">
                        <a-button v-perms="['/adminapi/system.auth.admin_user/delete']" :disabled="record.id === 1" shape="round" type="primary" status="danger">
                            <template #icon>
                                <icon-delete />
                            </template>
                        </a-button>
                    </a-popconfirm>
                </a-space>
            </template>
        </m-table>
        <editPopup ref="EditPopupRef" @success="run" />
    </div>
</template>

<script setup lang="ts">
import { getAdminList, deleteAdmin } from '@/api/system/auth/admin'
import { useRequest } from 'vue-request'
import editPopup from './components/edit.vue'

const EditPopupRef = ref<InstanceType<typeof editPopup>>()
const { data: adminList, loading, run } = useRequest(getAdminList)

const columns = [
    {
        title: 'ID',
        dataIndex: 'id',
        width: 80,
    },
    {
        title: '用户名',
        dataIndex: 'username',
        width: 150,
    },
    {
        title: '昵称',
        dataIndex: 'nickname',
        width: 150,
    },
    {
        title: '头像',
        dataIndex: 'avatar',
        width: 80,
        slotName: 'avatar',
    },
    {
        title: '状态',
        dataIndex: 'status',
        width: 80,
        slotName: 'status',
    },
    {
        title: '角色',
        dataIndex: 'role_name',
        slotName: 'role',
    },
    {
        title: '创建时间',
        dataIndex: 'create_time',
        slotName: 'created_at',
        width: 180,
    },
    {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 250,
        slotName: 'action',
    },
]

const handleEdit = (type: string, record?: any) => {
    EditPopupRef.value?.open(type)
    if (record) {
        // 等待弹窗打开后再设置数据
        nextTick(() => {
            EditPopupRef.value?.setFormData(record)
        })
    }
}   

const handleDelete = async (id: any) => {
    await deleteAdmin(id)
    run({})
}
</script>

<style scoped lang="scss"></style>